import 'package:flutter/material.dart';

/// 2022年更新  适配 flutter 3.0
class ToggleButtonsPage extends StatefulWidget {
  const ToggleButtonsPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return ToggleButtonsPageState();
  }
}

class ToggleButtonsPageState extends State with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ToggleButtons "),
      ),
      body: Center(child: buildToggleButtons()),
    );
  }

  //按钮对应的选中状态
  final List<bool> _isSelectList = [true, false, false];

  ///ToggleButtons的基本使用
  Widget buildToggleButtons() {
    return ToggleButtons(
      isSelected: _isSelectList,
      onPressed: (int index) {
        debugPrint(("当前点击的按钮索引 $index"));
        for (int i = 0; i < _isSelectList.length; i++) {
          if (i == index) {
            _isSelectList[i] = true;
          } else {
            _isSelectList[i] = false;
          }
        }
        setState(() {});
      },
      //边框颜色
      borderColor: Colors.red,
      //圆角
      borderRadius: const BorderRadius.all(Radius.circular(10)),
      //未选中的文本的颜色
      color: Colors.red,
      //选中的填充背景色
      fillColor: Colors.red,
      //选中的文本颜色
      selectedColor: Colors.white,
      //设置每个按钮的宽度与高度
      constraints: const BoxConstraints(minHeight: 44, minWidth: 84),
      //设置方向
      direction: Axis.horizontal,
      //按钮组
      children: const [
        Text("全部订单"),
        Text("未支付"),
        Text("已支付"),
      ],
    );
  }
}
